<template>
    <div class="functional-positioning-component">
        <div class="functional-grid">
            <div
                v-for="(item, index) in items"
                :key="index"
                class="functional-card"
                :class="{ active: activeIndex === index }"
                @mouseenter="setActiveIndex(index)">
                <div class="card-image">
                    <img
                        :src="item.image"
                        :alt="item.title" />
                </div>
                <div class="card-content">
                    <h3
                        class="card-title"
                        :class="{ active: activeIndex === index }">
                        {{ item.title }}
                    </h3>
                    <div
                        v-if="item.description"
                        class="card-description"
                        :class="{ 'show-on-mobile': true }">
                        <ul v-if="Array.isArray(item.description)">
                            <li
                                v-for="(desc, idx) in item.description"
                                :key="idx">
                                {{ desc }}
                            </li>
                        </ul>
                        <p v-else>{{ item.description }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';

    interface CardItem {
        title: string;
        image: string;
        description?: string | string[];
    }

    interface Props {
        items: CardItem[];
    }

    const props = defineProps<Props>();

    const activeIndex = ref(0);

    const setActiveIndex = (index: number) => {
        activeIndex.value = index;
    };
</script>

<style lang="scss" scoped>
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    .functional-positioning-component {
        margin-top: pxToRem(40);
    }

    .functional-grid {
        display: flex;
        gap: pxToRem(20);
        max-width: pxToRem(1560);
        margin: 0 auto;
        height: pxToRem(500);
    }

    .functional-card {
        position: relative;
        border-radius: pxToRem(16);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;

        &:not(.active) {
            flex: 1;
        }

        &.active {
            flex: 2;
        }

        &:hover {
            transform: translateY(-2px);
            // box-shadow: 0 pxToRem(10) pxToRem(30) rgba(0, 0, 0, 0.2);
        }

        // 为不同卡片添加特定的背景渐变
        &:nth-child(1) {
            .card-image::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(
                    135deg,
                    rgba(255, 107, 157, 0.8) 0%,
                    rgba(196, 69, 105, 0.8) 100%
                );
                z-index: 1;
                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

            &:not(.active) .card-image::after {
                background: #ffffff99;
            }

            &.active .card-image::after {
                background: #ff97d5a6;
            }
        }

        &:nth-child(2) {
            .card-image::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(
                    135deg,
                    rgba(116, 185, 255, 0.8) 0%,
                    rgba(9, 132, 227, 0.8) 100%
                );
                z-index: 1;
                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

            &:not(.active) .card-image::after {
                background: #ffffff99;
            }

            &.active .card-image::after {
                background: #ff97d5a6;
            }
        }

        &:nth-child(3) {
            .card-image::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(
                    135deg,
                    rgba(253, 121, 168, 0.8) 0%,
                    rgba(232, 67, 147, 0.8) 100%
                );
                z-index: 1;
                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

            &:not(.active) .card-image::after {
                background: #ffffff99;
            }

            &.active .card-image::after {
                background: #ff97d5a6;
            }
        }
        &:nth-child(4) {
            .card-image::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(
                    135deg,
                    rgba(253, 121, 168, 0.8) 0%,
                    rgba(232, 67, 147, 0.8) 100%
                );
                z-index: 1;
                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            }

            &:not(.active) .card-image::after {
                background: #ffffff99;
            }

            &.active .card-image::after {
                background: #ff97d5a6;
            }
        }
    }

    .card-image {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #f0f0f0;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            display: block;
        }
    }

    .card-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: pxToRem(20);
        padding-left: pxToRem(40);
        padding-right: pxToRem(40);
        height: calc(100% - pxToRem(40));
        color: white;
        transform: translateY(100%);
        transition: transform 0.6s ease;
        z-index: 2;
        opacity: 0;
    }

    .functional-card.active .card-content {
        transform: translateY(0);
        opacity: 1;
        transition: transform 0.6s ease, opacity 0.8s ease 0.3s;
    }

    .functional-card:not(.active) .card-content {
        transform: translateY(0);
        color: black;
        opacity: 1;
        transition: transform 0.6s ease, opacity 0.3s ease;
    }

    .functional-card:not(.active) .card-title {
        opacity: 1;
        transform: translateY(0);
        color: black;
    }

    .card-title {
        font-size: pxToRem(32);
        font-family: 'SFProDisplayBold';
        font-weight: 700;
        margin-bottom: pxToRem(15);
        margin-top: pxToRem(20);
        line-height: 1.3;
        text-align: left;
        color: black;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease 0.7s, transform 0.8s ease 0.7s, color 0.3s ease;

        &.active {
            color: white;
            opacity: 1;
            transform: translateY(0);
        }
    }

    .card-description {
        font-size: pxToRem(30);
        line-height: 1.2;
        margin: 0;
        font-weight: 400;
        text-align: left;
        position: absolute;
        bottom: pxToRem(40);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        p {
            margin-bottom: 0;
        }
        ul {
            margin: 0;
            padding-left: pxToRem(20);

            li {
                margin-bottom: pxToRem(10);

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .functional-card.active .card-description {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
    }

    // 响应式设计 - 平板端
    @include tablet {
        .functional-grid {
            flex-direction: column;
            height: auto;
            gap: pxToRem(15);
        }

        .functional-card {
            height: pxToRem(300);
            flex: none;
        }

        .card-content {
            padding: pxToRem(20);
        }

        .card-title {
            font-size: pxToRem(18);
        }

        .card-description {
            font-size: pxToRem(14);
        }
    }

    // 响应式设计 - 移动端 (768px以下)
    @include mobile {
        .functional-positioning-component {
            margin-top: pxToRem75(30);
        }

        .functional-grid {
            flex-direction: column;
            height: auto;
            gap: pxToRem75(30);
            max-width: 100%;
        }

        .functional-card {
            height: pxToRem75(400);
            flex: none;
            border-radius: pxToRem75(16);

            // 移动端所有卡片都显示选中状态的内容
            .card-content {
                padding: pxToRem75(30);
                height: calc(100% - pxToRem75(30));
                transform: translateY(0) !important;
                opacity: 1 !important;
                color: white !important;
                transition: none !important;
            }

            .card-title {
                font-size: pxToRem75(28);
                margin-bottom: pxToRem75(19);
                line-height: 1.3;
                color: white !important;
                opacity: 1 !important;
                transform: translateY(0) !important;
                transition: none !important;
            }

            .card-description {
                font-size: pxToRem75(28);
                bottom: pxToRem75(30);
                opacity: 1 !important;
                transform: translateY(0) !important;
                transition: none !important;

                // 移动端强制显示描述
                &.show-on-mobile {
                    opacity: 1 !important;
                    transform: translateY(0) !important;
                    display: block !important;
                }

                ul {
                    padding-left: pxToRem75(20);

                    li {
                        margin-bottom: pxToRem75(15);
                        line-height: 1.5;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }

                p {
                    line-height: 1.5;
                }
            }

            // 移动端所有卡片都使用选中状态的蒙层
            &:nth-child(1) .card-image::after,
            &:nth-child(2) .card-image::after,
            &:nth-child(3) .card-image::after,
            &:nth-child(4) .card-image::after {
                background: #ff97d5a6 !important;
                transition: none !important;
            }
        }
    }
</style>
